<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/winu-ui.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			html,
			body {
				background: rgba(0, 0, 0, 0.2);
			}
			
			.share-maim {
				padding-top: 3px;
				background: #fff;
				animation: swiper 0.3s;
				-webkit-animation: swiper 0.3s;
				height: 160px;
				overflow: hidden;
			}
			
			@-webkit-keyframes swiper {
				from {
					height: 0;
				}
				to {
					height: 160px;
				}
			}
			
			@-webkit-keyframes swiperend {
				from {
					height: 160px;
				}
				to {
					height: 0;
				}
			}
			.share-maim ul {}
			
			.share-maim ul li {
				text-align: center;
			}
			
			.share-maim ul li span {
				height: 3em;
				width: 3em;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background: #009944;
				margin: 16px auto 15px auto;
			}
			
			.share-maim ul li span i {
				color: #fff;
				font-size: 24px;
			}
			
			 ul li p {
				color: #a4a4a8;
			}
			
			.cancel-share {
				margin: 16px auto 0 auto;
				background: #e5e5e5;
				height: 45px;
				color: #444;
			}
		</style>
	</head>

	<body>
		<div class="share-container winu-flex-box-vertical">
			<div class="share-space winu-flex-item"></div>
			<div class="share-maim">
				<ul class="winu-flex-box-horizontal">
					<li class="winu-flex-item" tapmode id="qq">
						<span class="winu-display-inline-block winu-center-all"><i class="iconfont icon-qq"></i></span>
						<p>
							QQ好友
						</p>
					</li>
					<li class="winu-flex-item" tapmode id="weixin">
						<span class="winu-display-inline-block winu-center-all" style="background:#7ebf6f;"><i class="iconfont icon-weixin"></i></span>
						<p>
							微信好友
						</p>
					</li>
					<li class="winu-flex-item" tapmode id="weixinTimeline">
						<span class="winu-display-inline-block winu-center-all" style="background:#ec7d34"><i class="iconfont icon-friends"></i></span>
						<p>
							朋友圈
						</p>
					</li>
					<li class="winu-flex-item" tapmode id="weibo">
						<span class="winu-display-inline-block winu-center-all" style="background:#437dc7"><i class="iconfont icon-weibo"></i></span>
						<p>
							新浪微博
						</p>
					</li>
				</ul>
				<div class="cancel-share winu-center-all" tapmode onclick="closeShareFrame();">
					取消分享
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/AHelper.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
		function closeShareFrame() {
			$(".share-maim").css({
				"animation": "swiperend 0.3s",
				"-webkit-animation": "swiperend 0.3s",
				"height": "0"
			});
			setTimeout(function() {
				H.$closeCurrentFrame();
			}, 300);
		}
		Zepto(function() {
			$(".share-space").tap(function() {
				closeShareFrame();
			});
//			$(".share-maim li").on("tap", function() {
//				H.$toast($.trim($(this).find("p").text()));
//			});
		});

		function share(type, title, text, url, imgurl) {
			api.toast({
				msg: "分享操作正在后台进行…"
			});
			//			alert(type);
			if (type == "qq") {
				var obj = api.require('qq');
				obj.shareNews({
					type: 'QFriend',
					url: url,
					title: title,
					description: title,
					imgUrl: imgurl[0]
				}, function(ret, err) {
					if (ret.status == true) {
						api.toast({
							msg: "分享成功！"
						});
					} else {
						//						api.toast({
						//							msg: "分享失败！"
						//						});
					}
				});
			} else if (type == "qZone") {
				var obj = api.require('qq');
				obj.shareNews({
					type: 'QZone',
					url: url,
					title: title,
					description: title,
					imgUrl: imgurl[0]
				}, function(ret, err) {
					if (ret.toast == true) {
						api.alert({
							msg: "分享成功！"
						});
					} else {
						//						api.toast({
						//							msg: "分享失败！"
						//						});
					}
				});
			} else if (type == "sinaWb") {
				var weibo = api.require('weibo');
				weibo.shareWebPage({
				    text: title,
				    title: title,
				    description: title,
				     thumb: 'widget://image/icon-120.png',
				    contentUrl: url
				},function(ret,err){
				    if (ret.status) {
				          api.toast({msg:'分享成功'});
				    }
				});
			} else if (type == "weixin"){
				var wx = api.require('wx');
				wx.shareWebpage({
				    apiKey: '',
				    scene: 'session',
				    title: title	,
				    description: title,
				    thumb: 'widget://image/icon-120.png',
				    contentUrl: url
				}, function(ret, err){
				    if(ret.status){
				        api.toast({msg:'分享成功'});
				    }else{
				        api.toast({msg:err.code});
				    }
				});
			}else if(type == "wxTimeline"){
				var wx = api.require('wx');
				wx.shareWebpage({
				    apiKey: '',
				    scene: 'timeline',
				    title: title,
				    description: title,
				    thumb: 'widget://image/icon-120.png',
				    contentUrl: url
				}, function(ret, err){
				    if(ret.status){
				        alert('分享成功');
				    }else{
				        alert(err.code);
				    }
				});
			}
			closeShareFrame();
		}
		apiready = function() {
			var data = api.pageParam;
			var title = data.title;
			var text = data.text;
			var url = data.url;
			var imgurl = data.imgPaths;
			api.addEventListener({
				name: 'shareTo'
			}, function(ret, err) {
				data = ret.value.sharePara;
				title = data.title;
				text = data.text;
				url = data.url;
				imgurl = data.imgPaths;
			});
			document.getElementById('qq').addEventListener('click', function() {
				share('qq', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weibo').addEventListener('click', function() {
				share('sinaWb', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weixin').addEventListener('click', function() {
				share('weixin', title, text, url, imgurl);
				window.event.stopPropagation();
			});
			document.getElementById('weixinTimeline').addEventListener('click', function() {
				share('wxTimeline', title, text, url, imgurl);
				window.event.stopPropagation();
			});
		}
	</script>

</html>